<template>
  <div>
    <h1>我是{{ msg }}的学生</h1>
    <h2>学生名称：{{ name }}</h2>
    <h2>学生年龄：{{ myAge + 1 }}</h2>
    <h2>学生性别：{{ gender }}</h2>
    <button @click="changeAge">尝试修改传入的年龄</button>
  </div>
</template>

<script>
export default {
  name: "StudentInfo",
  data() {
    return {
      msg: "石大",
      myAge: this.age,
    };
  },
  methods: {
    changeAge() {
      this.myAge++;
    },
  },

  // 简单接收
  // props: ["name", "age", "gender"],

  // 接收的同时限制类型
  /* props: {
    name: String,
    age: Number,
    gender: String,
  }, */

  // 接收同时对数据类型限制+默认值+必要性
  props: {
    name: {
      type: String,
      require: true, // 名字必须传
    },
    age: {
      type: Number,
      default: 99,
    },
    gender: {
      type: String,
      require: true,
    },
  },
};
</script>